<template>
  <div>
    <el-card>
      <el-form>
        <el-form-item>
          点位搜索：
          <el-input
            v-model="params.name"
            placeholder="请输入内容"
            style="width: 200px"
            @change="changes"
          ></el-input>
          区域搜索:
          <el-select
            @visible-change="qyFn"
            placeholder="请选择"
            :filterable="true"
            v-model="params.regionId"
          >
            <el-option
              v-for="item in options"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button type="primary" @click="searchFn">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table style="width: 100%" :data="tableData">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="name" label="点位名称"> </el-table-column>
        <el-table-column prop="region.name" label="所在区域"> </el-table-column>
        <el-table-column prop="businessType.name" label="商圈类型">
        </el-table-column>
        <el-table-column prop="ownerName" label="合作商"> </el-table-column>
        <el-table-column prop="addr" label="详细地址"> </el-table-column>
        <el-table-column prop="id" label="操作"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getNodeSearch, getAreaList } from "@/api/user";
export default {
  data() {
    return {
      options: [],
      list: [],
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        name: "",
        regionId: "",
      },
    };
  },
  methods: {
    searchFn() {
      this.getNodeSearch();
    },
    async getNodeSearch() {
      const res = await getNodeSearch(this.params);
      //console.log(res);
      this.tableData = res.data.currentPageRecords;
    },
    async getAreaList() {
      // this.searchFn();
      const res = await getAreaList();
      console.log(res.data.currentPageRecords);
      this.tableData.forEach((item) => {
        if (this.options.indexOf(item.region.name) === -1) {
          this.options.push(item.region);
        }
      });
      console.log(this.options);
    },
    qyFn() {
      this.getAreaList();
    },
    changes() {
      this.getAreaList();
    },
  },
  created() {
    this.getNodeSearch();
  },
};
</script>

<style>
.el-input {
  margin-right: 20px;
}
</style>
